<script setup lang="ts">
const {waterForm, tableHeaders} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
  tableHeaders: Array;  // 定义采样时间的类型
  tabler: Array;  // 定义采样时间的类型
}>();


</script>

<template>
  <div style="padding: 0 40px">
    <div style="margin-bottom: 150px" v-for="(pageData, pageIndex) in tableHeaders" :key="pageIndex">
      <h1 style="text-align: center;font-size: 28px; padding-top: 50px">水质 氟化物分析原始记录(A面)</h1>
      <div> SXLPHJ/JL/CX-22-49</div>
      <table class="table">
        <tr>
          <td style="width: 200px;">任务编号</td>
          <td colspan="2">
            <span>{{ waterForm.task_name }}</span>
          </td>
          <td>采样日期</td>
          <td>
            {{ waterForm.sampling_time }}
          </td>
          <td>分析日期</td>
          <td style="width: 150px;">
            {{ waterForm.anal_time }}
          </td>
        </tr>
        <tr>
          <td>分析方法</td>
          <td colspan="4">
            <div style="height: 40px;display: flex;align-items: center;justify-content: center;">
              {{ waterForm.method }}
            </div>
          </td>
          <td>检出限</td>
          <td>
            {{ waterForm.limit_val }}
          </td>
        </tr>
        <tr>
          <td>分析仪器</td>
          <td colspan="2">
            {{ waterForm.device_name }}
          </td>
          <td>仪器型号</td>
          <td>
            {{ waterForm.device_model }}
          </td>
          <td>仪器编号</td>
          <td>
            {{ waterForm.device_number }}
          </td>
        </tr>
        <tr>
          <td>环境温度</td>
          <td colspan="2">
            {{ waterForm.temperature }}℃
          </td>
          <td>环境湿度</td>
          <td>
            {{ waterForm.humidity }} %RH
          </td>
          <td>样品类别</td>
          <td>
            {{ waterForm.category_id }}
          </td>
        </tr>
        <tr>
          <td>计算公式</td>
          <td colspan="6">
            {{ waterForm.js_formula }}
          </td>
        </tr>
        <tr>
          <td>校准曲线(y=a+b·lg(m/50))</td>
          <td colspan="6">
            <div style="display: flex;align-items: center;">
              a= {{ waterForm.a }}
              b= {{ waterForm.b }}
            </div>
          </td>
        </tr>
        <tr>
          <!-- 动态渲染表头 -->
          <td v-for="(header, index) in tabler" :key="index">
            <div style="height: 35px;display: flex;align-items: center;justify-content: center">{{ header }}</div>
          </td>
        </tr>
        <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
          <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
            <div style="height: 35px;display: flex;align-items: center;justify-content: center">
              {{ row[key] }}
            </div>
          </td>
        </tr>
        <!--        <tr v-for="index in 26" :key="index">-->
        <!--          <td>1</td>-->
        <!--          <td>普通样</td>-->
        <!--          <td>1</td>-->
        <!--          <td>1</td>-->
        <!--          <td>1</td>-->
        <!--          <td>1</td>-->
        <!--          <td>1</td>-->
        <!--        </tr>-->
        <tr>
          <td>备注</td>
          <td colspan="6">
            <div style="height: 50px;">{{ waterForm.notes }}</div>
          </td>
        </tr>
      </table>
      <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
        <div>分析人：</div>
        <div>校核人：</div>
        <div>审核人：</div>
        <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length + 1 }} 页</div>
      </div>
    </div>
    <div style="text-align: center;display: flex;align-items: center;justify-content: space-between;">
      <h3></h3>
      <h1 style="font-size: 28px;padding-top: 70px">水质 氟化物分析原始记录(B面)</h1>
      <div></div>
    </div>
    <div>SXLPHJ/JL/CX-22-49</div>
    <table class="table">
      <tr>
        <td colspan="10" style="text-align: center">
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div></div>
            <span>标准曲线绘制</span>
            <div style="display: flex;align-items: center;">
              <span style="width: 140px;">绘制日期：</span>
              {{ waterForm.hzrq }}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>标准贮备液批号</td>
        <td colspan="2">
          <div style="height: 20px">
            {{ waterForm.bzzbyph }}
          </div>
        </td>
        <td colspan="2">贮备液浓度(mg/L)</td>
        <td colspan="2">
          {{ waterForm.zbynd }}
        </td>
        <td>贮备液有校日期</td>
        <td colspan="2">
          {{ waterForm.zbyyxrq }}
        </td>
      </tr>
      <tr>
        <td>标准中间贮备液浓度（mg/L）</td>
        <td colspan="2">
          {{ waterForm.bzszjynd }}
        </td>
        <td colspan="2">移取标准贮备体积(mL)</td>
        <td colspan="2">
          {{ waterForm.yqbzzbytj }}
        </td>
        <td>定容体积(mL)</td>
        <td colspan="2">
          {{ waterForm.drtj1 }}
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td colspan="2">标准使用液浓度(mL)</td>
        <td colspan="2">
          {{ waterForm.bzsyynd }}
        </td>
        <td colspan="2">移取标准中间液体积(mL)</td>
        <td colspan="2">
          {{ waterForm.yqbzzjytj }}
        </td>
        <td>定容体积(mL)</td>
        <td colspan="2">
          {{ waterForm.drtj2 }}
        </td>
      </tr>
      <tr>
        <td>编号</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
      <tr>
        <td>标准使用液体积（mL）</td>
        <td>
          {{ waterForm.bzytsj.bzytsj_1 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_2 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_3 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_4 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_5 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_6 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_7 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_8 }}
        </td>
        <td>
          {{ waterForm.bzytsj.bzytsj_9 }}
        </td>
      </tr>
      <tr>
        <td>标准物质含量（mL）</td>
        <td v-for="i in 9" :key="'bzwzhl_' + i">
          {{ waterForm.bzytsj[`bzwzhl_${i}`] }}
        </td>
      </tr>
      <tr>
        <td>Lg（mL/50）</td>
        <td v-for="i in 9" :key="'lg_' + i">
          {{ waterForm.bzytsj[`lg_${i}`] }}
        </td>
      </tr>
      <tr>
        <td>毫伏值（mV）</td>
        <td v-for="i in 9" :key="'hfz_' + i">
          {{ waterForm.bzytsj[`hfz_${i}`] }}
        </td>
      </tr>
      <tr>
        <td>校准曲线</td>
        <td colspan="6">
          <div style="display: flex; align-items: center;">
            y=
            <span>{{ waterForm.y }}</span>
            r=
            <span>{{ waterForm.r }}</span>
          </div>
        </td>
        <td>曲线定容体积(mL)</td>
        <td colspan="2">
          <span>{{ waterForm.qxdrtj }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="10" style="text-align: center">曲线校核点测定</td>
      </tr>
      <tr>
        <td style="text-align: center" colspan="2">样品编号</td>
        <td colspan="2" style="text-align: center">
          <div style="display: flex;align-items: center;">
            测定结果( {{ waterForm.unit.qx_cdjg }} )
          </div>
        </td>
        <td style="text-align: center" colspan="2">
          <div style="display: flex;align-items: center;">
            相对( {{ waterForm.unit.qx_xd }} )(%)
          </div>
        </td>
        <td colspan="2" style="text-align: center">质控要求</td>
        <td colspan="2" style="text-align: center">是否合格</td>
      </tr>
      <tr v-for="(item, index) in waterForm.qxjhdcd" :key="index">
        <td style="text-align: center" colspan="2">
          <span>{{ item.qx_ypbh }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.qx_cdjg }}</span>
        </td>
        <td style="text-align: center" colspan="2">
          <span>{{ item.qx_xd }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.qx_zkyq }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.qx_sfhg }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="10" style="text-align: center">空白检查</td>
      </tr>
      <tr>
        <td style="text-align: center" colspan="2">样品编号</td>
        <td style="text-align: center" colspan="2">毫伏值(mV)</td>
        <td colspan="2" style="text-align: center">
          <div style="display: flex;align-items: center;">
            样品浓度( {{ waterForm.unit.kb_ypnd }} )
          </div>
        </td>
        <td style="text-align: center" colspan="2">质控要求</td>
        <td colspan="2" style="text-align: center">是否合格</td>
      </tr>
      <tr v-for="(item, index) in waterForm.kbycd" :key="index">
        <td style="text-align: center" colspan="2">
          <span>{{ item.kb_ypbh }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.kb_hfz }}</span>
        </td>
        <td style="text-align: center" colspan="2">
          <span>{{ item.kb_ypnd }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.kb_zkyq }}</span>
        </td>
        <td colspan="2" style="text-align: center">
          <span>{{ item.kb_sfhg }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="10" style="text-align: center">平行样测定</td>
      </tr>
      <tr>
        <td colspan="2">平行样编号</td>
        <td colspan="3">
          ( {{ waterForm.pxycd_fx.bt_1 }} )
          ( {{ waterForm.pxycd_fx.bt_2 }} )
        </td>
        <td colspan="3">
          ( {{ waterForm.pxycd_fx.bt_3 }} )
          ( {{ waterForm.pxycd_fx.bt_4 }} )
        </td>
        <td colspan="2">
          ( {{ waterForm.pxycd_fx.bt_5 }} )
          ( {{ waterForm.pxycd_fx.bt_6 }} )
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div style="display: flex;align-items: center;justify-content: center">
            测定浓度( {{ waterForm.unit.px_cdnd }} )
          </div>
        </td>
        <td>
          <span>{{ waterForm.pxycd_fx.cdnd_1 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.cdnd_2 }}</span>
        </td>
        <td>
          <span>{{ waterForm.pxycd_fx.cdnd_3 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.cdnd_4 }}</span>
        </td>
        <td>
          <span>{{ waterForm.pxycd_fx.cdnd_5 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.cdnd_6 }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-radio-group v-model="waterForm.pxycd_fx.xdpc_1">
            <el-radio value="Value 1">相对偏差</el-radio>
            <el-radio value="Value 2">自定义</el-radio>
          </el-radio-group>
        </td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.xdpc_2 }}</span>
        </td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.xdpc_3 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.xdpc_4 }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">质控要求</td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.zkyq_1 }}</span>
        </td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.zkyq_2 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.zkyq_3 }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">是否合格</td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.sfhg_1 }}</span>
        </td>
        <td colspan="3">
          <span>{{ waterForm.pxycd_fx.sfhg_2 }}</span>
        </td>
        <td colspan="2">
          <span>{{ waterForm.pxycd_fx.sfhg_3 }}</span>
        </td>
      </tr>
      <tr>
        <td colspan="10" style="text-align: center">标准样品测定</td>
      </tr>
      <tr>
        <td colspan="2">样品批号</td>
        <td colspan="3">
          测定浓度( {{ waterForm.unit.bz_cdnd }} )
        </td>
        <td colspan="3">
          标准值( {{ waterForm.unit.bz_bzz }} )
        </td>
        <td colspan="2">是否合格</td>
      </tr>
      <tr v-for="(item, index) in waterForm.bzycd" :key="index">
        <td colspan="2">
          <span>{{ item.bz_byph }}</span>
        </td>
        <td colspan="3">
          <span>{{ item.bz_cdnd }}</span>
        </td>
        <td colspan="3">
          <span>{{ item.bz_bzz }}</span>
        </td>
        <td colspan="2">
          <span>{{ item.bz_sfhg }}</span>
        </td>
      </tr>

      <tr>
        <td colspan="10" style="text-align: center">加标回收样测定</td>
      </tr>
      <tr>
        <td colspan="2">样品编号</td>
        <td colspan="2">标液浓度（ ）</td>
        <td>加标量（ ）</td>
        <td>加标后样品含量/浓度（ ）</td>
        <td>原样品含量/浓度（ ）</td>
        <td>回收率（%）</td>
        <td>质控要求</td>
        <td>是否合格</td>
      </tr>
      <tr v-for="(item, index) in waterForm.jbycd" :key="index">
        <td colspan="2">
          <span>{{ item.jb_ypbh }}</span>
        </td>
        <td colspan="2">
          <span>{{ item.jb_bynd }}</span>
        </td>
        <td>
          <span>{{ item.jb_jbl }}</span>
        </td>
        <td>
          <span>{{ item.jb_yphl }}</span>
        </td>
        <td>
          <span>{{ item.jb_yyphl }}</span>
        </td>
        <td>
          <span>{{ item.jb_hsl }}</span>
        </td>
        <td>
          <span>{{ item.jb_zkyq }}</span>
        </td>
        <td>
          <span>{{ item.jb_sfhg }}</span>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="9">
          {{ waterForm.bnotes }}
        </td>
      </tr>
    </table>
    <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
      <div>分析人：</div>
      <div>校核人：</div>
      <div>审核人：</div>
      <div>第 {{ tableHeaders.length + 1 }} 页 / 共 {{ tableHeaders.length + 1 }} 页</div>
    </div>
  </div>

</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 4px 10px;
  font-size: 16px;
  text-align: center;
  height: 38px;
}

tr {
  page-break-inside: avoid
}

.fs12 {
  font-size: 12px;
}


.table {
  width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {
  /* 隐藏页眉和页脚 */
  @page {
    margin: 0;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th, td {
    page-break-inside: avoid;
  }

  body {
    margin: 0;
    padding: 0;
    zoom: 100%;
  }

  div {
    page-break-inside: avoid;
  }

  /* 禁用打印页脚和页眉 */
  .no-print {
    display: none;
  }

  /* 如果你不想打印特定元素，可以这样设置 */
  header, footer, nav, .no-print {
    display: none !important;
  }

  /* 保证内容区域不受其他元素影响 */
  .content {
    display: block;
  }
}
</style>
